<template>
  <div class="activeDatas">
    <div class="title">
      预约信息
    </div>
    <el-form>
      <el-form-item label="城市：">
        <el-select v-model="valueCity" placeholder="全部" @change="pointChange">
          <el-option
            v-for="item in pointCity"
            :key="item.enName"
            :label="item.chName"
            :value="item.enName">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableList" style="width: 100%" border show-summary fixed>
      <el-table-column
        prop="day"
        width="120"
        >
      </el-table-column>
      <el-table-column label="注册人数">
        <el-table-column
          prop="registerNumber1"
          label="Podium"
          >
        </el-table-column>
        <el-table-column
          prop="registerNumber2"
          label="VIP"
         >
        </el-table-column>
        <el-table-column
          prop="registerNumber3"
          label="SMS"
          >
        </el-table-column>
      </el-table-column>
      <el-table-column label="到场人数">
        <el-table-column
          prop="arrivalNumber1"
          label="Podium"
         >
        </el-table-column>
        <el-table-column
          prop="arrivalNumber2"
          label="VIP"
          >
        </el-table-column>
        <el-table-column
          prop="arrivalNumber3"
          label="SMS"
          >
        </el-table-column>
      </el-table-column>
      <el-table-column label="到场次数">
        <el-table-column
          prop="arrivalTimes1"
          label="Podium"
          >
        </el-table-column>
        <el-table-column
          prop="arrivalTimes2"
          label="VIP"
         >
        </el-table-column>
        <el-table-column
          prop="arrivalTimes3"
          label="SMS"
          >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return{
        valueCity: '全部',
        pointCity: [
          {'chName':'全部',enName: ''},
          {'chName':'杭州',enName: 'hangzhou'},
          {'chName':'深圳',enName: 'shenzhen'},
          {'chName':'广州',enName: 'guangzhou'},
          {'chName':'郑州',enName: 'zhengzhou'},
          {'chName':'长沙',enName: 'changsha'},
          {'chName':'太原',enName: 'taiyuan'},
          {'chName':'重庆',enName: 'chongqing'},
          {'chName':'杭州0815',enName: 'hangzhouB'},
          ],
        tableList: [
          {
            day:"2018/06/18",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/19",
            registerNumber1:11,registerNumber2:6,registerNumber3:7,
            arrivalNumber1:4,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:3,arrivalTimes2:0,arrivalTimes3:0
          },
          {
            day:"2018/06/20",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/18",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/19",
            registerNumber1:11,registerNumber2:6,registerNumber3:7,
            arrivalNumber1:4,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:3,arrivalTimes2:0,arrivalTimes3:0
          },
          {
            day:"2018/06/20",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/18",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/19",
            registerNumber1:11,registerNumber2:6,registerNumber3:7,
            arrivalNumber1:4,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:3,arrivalTimes2:0,arrivalTimes3:0
          },
          {
            day:"2018/06/20",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },{
            day:"2018/06/18",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },
          {
            day:"2018/06/19",
            registerNumber1:11,registerNumber2:6,registerNumber3:7,
            arrivalNumber1:4,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:3,arrivalTimes2:0,arrivalTimes3:0
          },
          {
            day:"2018/06/20",
            registerNumber1:1,registerNumber2:2,registerNumber3:0,
            arrivalNumber1:0,arrivalNumber2:1,arrivalNumber3:1,
            arrivalTimes1:0,arrivalTimes2:10,arrivalTimes3:0
          },

        ],
      }
    },
    methods: {
      pointChange() {
        console.log(this.valueCity)
      },
      getTableList() {
        var cityValue = ''
        if(this.valueCity=='全部'){
          cityValue = 'all';
        }else{
          cityValue = this.valueCity;
        }
        let jsons = {
          city: cityValue,
          mid: '10001'
        }
        axios.post('http://leseauxpodium.chanel.com.cn/leseauxpodium/bgm_sd',jsons)
          .then((result)=>{
            var actives = result.data.data.mapReduces
            console.log(actives)
          })
      }
    },
    mounted() {

//      this.getTableList()
    }
  }
</script>



<style>
  .activeDatas .title{
    text-align: left;
    font-size: 22px;
    color:#697882;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .el-form-item{
    float: left;
    width: 300px;
    box-sizing: border-box;
  }
 .activeDatas .el-table th>.cell{
    text-align: center;
  }
</style>
